<template>
    <div>
        <div style="background:#ECECEC; padding:30px">
            <a-page-header
                    style="border: 1px solid rgb(235, 237, 240)"
                    title="Title"
                    sub-title="This is a subtitle"
                    @back="() => null"
            />
            <a-card  :bordered="false">
                <a-table :columns="columns" :data-source="data" :pagination="false">
                    <a slot="name" slot-scope="text">{{ text }}</a>
                    <span slot="customTitle"><a-icon type="smile-o"/> Name</span>
                    <span slot="tags" slot-scope="tags">
              <a-tag
                      v-for="tag in tags"
                      :key="tag"
                      :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </span>
                    <span slot="action" slot-scope="text, record">
              <a>Invite 一 {{ record.name }}</a>
              <a-divider type="vertical"/>
                <a-popconfirm
                        v-if="data.length"
                        title="Sure to delete?"
                        @confirm="() => onDelete(record.key)"
                >
              <a>Delete</a>
                </a-popconfirm>
              <a-divider type="vertical"/>
                  <a-dropdown>
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                      更多操作 <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay" @click="(key)=>handleMenuClick(key,record)">
                      <a-menu-item key="delete">
                        <a href="javascript:;">1st menu item</a>
                      </a-menu-item>
                      <a-menu-item key="2">
                        <a href="javascript:;">2nd menu item</a>
                      </a-menu-item>
                      <a-menu-item key="3">
                        <a href="javascript:;">3rd menu item</a>
                      </a-menu-item>
                    </a-menu>
              </a-dropdown>
             </span>
                    <template slot="footer" slot-scope="currentPageData">
                        <a-pagination v-model="current" :total="50" show-less-items/>
                    </template>
                </a-table>
            </a-card>
        </div>
    </div>
</template>

<script>
  const columns = [
    {
      dataIndex: 'name',
      key: 'name',
      slots: { title: 'customTitle' },
      scopedSlots: { customRender: 'name' },
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      scopedSlots: { customRender: 'tags' },
    },
    {
      title: 'Action',
      key: 'action',
      scopedSlots: { customRender: 'action' },
    },
  ]

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    }, {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    }, {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    }, {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    }, {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    }, {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    }, {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ]
  export default {
    name: 'userTable',
    data () {
      return {
        data,
        columns,
        tableMoreDown: [
          {
            id: 1,
            name: '删除',
          }, {
            id: 2,
            name: '转发',
          }, {
            id: 3,
            name: '编辑',
          },
        ],
        current: 2,
      }
    },
    methods: {
      onDelete () {
        this.$message.success('This is a success message')
      },
      handleMenuClick ({ key }, item) {
        console.log(key)
        console.log(item)
      },
      handleMenuClick2 ({ key }) {
        console.log(key)
      },
    },
  }
</script>

<style scoped>

</style>
